<template>
  <div class="order-management">
    <!-- 订单列表表格 -->
    <el-table :data="orderList" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="number" label="订单编号" width="200" />
      <el-table-column prop="orderTime" label="下单时间" width="200" />
      <el-table-column prop="address" label="收货地址" width="200" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="consignee" label="收货人名字" width="150" />
      <el-table-column prop="amount" label="支付金额" width="150" />
      <el-table-column prop="category" label="支付类型" width="150" />
      <el-table-column label="操作" width="165">
        <template #default="scope">
          <el-button type="primary" link @click.stop="openDetailDialog(scope.row)">修改地址</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog v-model="dialogVisible" title="订单详情" width="600px">
      <el-form :model="editForm" ref="formRef">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单编号">{{ currentOrder?.number }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ currentOrder?.orderTime }}</el-descriptions-item>
          <el-descriptions-item label="支付金额">{{ currentOrder?.amount }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{ currentOrder?.name }}</el-descriptions-item>
          <el-descriptions-item label="支付类型">{{ currentOrder?.category }}</el-descriptions-item>
          <!-- 可编辑的收货地址 -->
          <el-descriptions-item label="收货地址">
            <el-form-item prop="address" :rules="[{ required: true, message: '地址不能为空' }]">
              <el-input v-model="editForm.address" placeholder="请输入新的收货地址" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="手机号">{{ currentOrder?.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货人">{{ currentOrder?.consignee }}</el-descriptions-item>
          <el-descriptions-item label="商品数量">{{ currentOrder?.quantity }}</el-descriptions-item>
        </el-descriptions>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-popconfirm title="确定要处理该订单吗？" @confirm="handleOrder">
            <template #reference>
              <el-button type="success">保存并处理订单</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'

interface Order {
  number: string
  orderTime: string
  amount: number
  name: string
  address: string
  phone: string
  consignee: string
  quantity: number
  category: string
}

const orderList = ref<Order[]>([
  {
    number: '20240101001',
    orderTime: '2024-01-01 10:00:00',
    amount: 50.0,
    name: '苹果',
    address: '北京市朝阳区XX路XX号',
    phone: '13800138000',
    consignee: '张三',
    quantity: 10,
    category: '普通支付'
  },
  {
    number: '20240102002',
    orderTime: '2024-01-02 11:00:00',
    amount: 30.0,
    name: '香蕉',
    address: '上海市浦东新区XX路XX号',
    phone: '13900139000',
    consignee: '李四',
    quantity: 20,
    category: '团购支付'
  }
]) // 保持原有数据不变

const currentOrder = ref<Order | null>(null)
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const editForm = reactive({
  address: ''
})

const openDetailDialog = (row: Order) => {
  currentOrder.value = row
  editForm.address = row.address // 初始化表单数据
  dialogVisible.value = true
}

const handleOrder = async () => {
  try {
    // 验证表单
    await formRef.value?.validate()

    // 更新订单地址
    if(currentOrder.value) {
      const index = orderList.value.findIndex(o => o.number === currentOrder.value?.number)
      if(index !== -1) {
        orderList.value[index].address = editForm.address
      }
    }

    ElMessage.success('订单处理成功')
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('请填写有效地址')
  }
}

const handleRowClick = (row: Order) => {
  openDetailDialog(row)
}
</script>

<style scoped>
.order-management {
  padding: 20px;
}
</style>